<template>
  <div class="popout">
    <!-- 弹框组件 -->
    <div data-modal="header-search" class="modal header-modal-search active">
      <div class="modal__hide-scroll">
        <div class="container">
          <div class="modal__content box animated" :class="startSearch">
            <form action="/charity/persondonation" method="get" id="frmSearch">
              <input
                type="search"
                id="search_term"
                name="id"
                placeholder="Student ID"
                autofocus=""
              />
              <span class="modal__close" @click="onCancel"
                ><img src="~/assets/image/common/cancle.svg" alt=""
              /></span>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPrpout: true,
      startSearch: "fadeInDown"
    };
  },
  methods: {
    //  点击确定
    onConfirm() {
      this.$emit("confirm", "确定111");
    },
    // 点击取消
    onCancel() {
      this.startSearch = "fadeOutDownBig";
      setTimeout(() => {
        this.$emit("cancel", "取消111");
        this.startSearch = "fadeInDown";
      }, 300);
    }
  }
};
</script>

<style scoped>
.popout {
  width: 100vw;
  height: 100vh;
  /* background-color: rgba(0, 0, 0, 0.5); */
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-family: "Open Sans", sans-serif !important;
}
input {
  font-family: "Open Sans", sans-serif !important;
  line-height: 1.3;
  border-bottom: 2px solid #737475  !important;
}
.modal.active {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.modal {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(252, 248, 235, 0.95);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  z-index: 15;
}
.header-modal-search form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 20px;
}
/* .header-modal-search form, */
.home-wotd__judges,
.home-wotd__middle,
footer.main {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
}
.modal__content {
  padding-top: 23vh;
  padding-bottom: 60px;
  position: relative;
}
.header-modal-search input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  background-color: transparent;
  border-bottom: 1px solid #737475;
  font-size: 30px;
  letter-spacing: 0.1em;
  width: 20vw;
  max-width: 100%;
  padding: 3px 0;
  border-radius: 0;
  border: none;
  outline: medium;
}
*,
:after,
:before {
  box-sizing: border-box;
}
</style>
